<!--
 * @Description: 
 * @Autor: dongjunhua
 * @Date: 2021-01-20 09:16:50
 * @LastEditors: dongjunhua
 * @LastEditTime: 2021-09-08 10:02:39
-->
<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="top-container">
          <div class="top-title">
            项目数量
            <el-tooltip
              class="item"
              effect="dark"
              content="Top Center 提示文字"
              placement="top"
            >
              <i class="fas fa-info-circle"></i>
            </el-tooltip>
          </div>
          <div class="top-content">
            <span>{{ moneyFormatter(1024, 0, ',') }}</span>
            <div class="top-chart">
              <v-chart :option="option1" :autoresize="true" />
            </div>
          </div>
          <div class="top-footer">项目历年立项</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="top-container">
          <div class="top-title">
            项目总金额
            <el-tooltip
              class="item"
              effect="dark"
              content="Top Center 提示文字"
              placement="top"
            >
              <i class="fas fa-info-circle"></i>
            </el-tooltip>
          </div>
          <div class="top-content">
            <span>¥&nbsp;{{ moneyFormatter(4096, 2, ',') }}</span>
            <div class="top-chart">
              <v-chart :option="option2" :autoresize="true" />
            </div>
          </div>
          <div class="top-footer">项目按年汇总金额</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="top-container">
          <div class="top-title">
            项目余额
            <el-tooltip
              class="item"
              effect="dark"
              content="Top Center 提示文字"
              placement="top"
            >
              <i class="fas fa-info-circle"></i>
            </el-tooltip>
          </div>
          <div class="top-content">
            <span>¥&nbsp;{{ moneyFormatter(2048, 2, ',') }}</span>
            <div class="top-chart">
              <v-chart :option="option3" :autoresize="true" />
            </div>
          </div>
          <div class="top-footer">使用对比</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="top-container">
          <div class="top-title">
            项目总执行进度
            <el-tooltip
              class="item"
              effect="dark"
              content="Top Center 提示文字"
              placement="top"
            >
              <i class="fas fa-info-circle"></i>
            </el-tooltip>
          </div>
          <div class="top-content">
            <span>{{ moneyFormatter(50, 2, ',') }}%</span>
            <div class="top-chart">
              <v-chart :option="option4" :autoresize="true" />
            </div>
          </div>
          <div class="top-footer">执行进度50%</div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="16">
        <div class="content-container">
          <el-tabs v-model="activeName">
            <el-tab-pane label="立项数量分布" name="first" />
            <el-tab-pane label="立项总额分布" name="second" />
          </el-tabs>
          <div class="content-chart">
            <v-chart
              :option="activeName === 'first' ? option5 : option7"
              :autoresize="true"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="content-container">
          <div class="content-chart left">
            <v-chart :option="option6" :autoresize="true" />
          </div>
        </div>
      </el-col>
    </el-row>

    <svg-icon icon-class="noctua" className="logo-icon" />
    <div class="text" v-if="device === 'desktop'">
      <span>Noctua Admin</span>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue';
import { useStore } from 'vuex';
import { moneyFormatter } from '@/utils/formatter';
import { use, graphic } from 'echarts/core';
import {
  GridComponent,
  TooltipComponent,
  VisualMapComponent,
  TitleComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts'; // , { THEME_KEY }

use([
  GridComponent,
  TooltipComponent,
  VisualMapComponent,
  TitleComponent,
  LegendComponent,
  BarChart,
  LineChart,
  PieChart,
  CanvasRenderer
]);

export default {
  name: 'Home',
  components: {
    VChart
  },
  // provide: {
  //   [THEME_KEY]: 'dark'
  // },
  setup() {
    const store = useStore();
    const device = computed(() => store.state.app.device);

    const option4Data = [
      ['2021-06-05', 116],
      ['2021-06-06', 129],
      ['2021-06-07', 135],
      ['2021-06-08', 86],
      ['2021-06-09', 73],
      ['2021-06-10', 85],
      ['2021-06-11', 73],
      ['2021-06-12', 68],
      ['2021-06-13', 92],
      ['2021-06-14', 130],
      ['2021-06-15', 245],
      ['2021-06-16', 139],
      ['2021-06-17', 115],
      ['2021-06-18', 111],
      ['2021-06-19', 309],
      ['2021-06-20', 206],
      ['2021-06-21', 137],
      ['2021-06-22', 128],
      ['2021-06-23', 85],
      ['2021-06-24', 94],
      ['2021-06-25', 71],
      ['2021-06-26', 106],
      ['2021-06-27', 84],
      ['2021-06-28', 93],
      ['2021-06-29', 85],
      ['2021-06-30', 73],
      ['2021-07-01', 83],
      ['2021-07-02', 125],
      ['2021-07-03', 107],
      ['2021-07-04', 82],
      ['2021-07-05', 44],
      ['2021-07-06', 72],
      ['2021-07-07', 106],
      ['2021-07-08', 107],
      ['2021-07-09', 66],
      ['2021-07-10', 91],
      ['2021-07-11', 92],
      ['2021-07-12', 113],
      ['2021-07-13', 107],
      ['2021-07-14', 131],
      ['2021-07-15', 111],
      ['2021-07-16', 64],
      ['2021-07-17', 69],
      ['2021-07-18', 88],
      ['2021-07-19', 77],
      ['2021-07-20', 83],
      ['2021-07-21', 111],
      ['2021-07-22', 57],
      ['2021-07-23', 55],
      ['2021-07-24', 60]
    ];

    const dateList = option4Data.map(function(item) {
      return item[0];
    });
    const valueList = option4Data.map(function(item) {
      return item[1];
    });

    const data = reactive({
      today: new Date(),
      option1: {
        color: ['rgb(58,161,255)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '0',
          right: '0',
          top: '0',
          bottom: '0'
        },
        xAxis: {
          type: 'category',
          data: [
            '2000',
            '2001',
            '2002',
            '2003',
            '2004',
            '2005',
            '2006',
            '2007',
            '2008',
            '2009',
            '2010',
            '2011',
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
            '2018',
            '2019',
            '2020',
            '2021'
          ],
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: [
              20,
              70,
              90,
              80,
              70,
              110,
              130,
              50,
              40,
              110,
              90,
              50,
              40,
              110,
              90,
              140,
              140,
              20,
              70,
              90,
              20,
              70,
              90
            ],
            type: 'bar',
            barWidth: '8'
          }
        ]
      },
      option2: {
        grid: {
          left: '-20',
          right: '-20',
          top: '5',
          bottom: '0'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: [820, 1932, 501, 1934, 1290, 1330, 3000],
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(182,143,236)'
                },
                {
                  offset: 1,
                  color: 'rgb(182,40,236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            }
          }
        ]
      },
      option3: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '5',
          right: '5',
          bottom: '5',
          top: '5'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['基础数据', '消息中心', '流程中心', '网上报销', '薪资查询'],
            show: false
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: false
          }
        ],
        series: [
          {
            name: '测试',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [10, 10, 12, 50, 90]
          },
          {
            name: '开发',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290]
          }
        ]
      },
      option4: {
        visualMap: {
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 400
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: dateList,
          show: false
        },
        yAxis: {
          show: false
        },
        grid: {
          left: '5',
          right: '5',
          bottom: '5',
          top: '5'
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: valueList
          }
        ]
      },
      option5: {
        color: ['rgb(58,161,255)'],
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 110, 130, 56, 70, 110],
            type: 'bar',
            barWidth: '50%'
          }
        ]
      },
      option6: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '50',
          left: 'center'
        },
        title: {
          text: '数据来源'
        },
        grid: {
          top: '500'
        },
        series: [
          {
            name: '数据来源',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '基础数据' },
              { value: 735, name: '网上报销' },
              { value: 580, name: '流程中心' },
              { value: 484, name: '消息中心' }
            ]
          }
        ]
      },
      option7: {
        color: ['rgb(58,161,255)'],
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              19000,
              4000,
              1500,
              8000,
              7000,
              1100,
              1300,
              1100,
              1300,
              5600,
              700,
              1100
            ],
            type: 'bar',
            barWidth: '50%'
          }
        ]
      },
      activeName: 'first'
    });

    return {
      ...toRefs(data),
      device,
      moneyFormatter
    };
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;
  .user-info {
    margin-bottom: 20px;
    margin-left: 10px;
  }
  .top-container {
    background-color: #ffffff;
    padding: 20px 20px 15px 20px;
    margin-bottom: 20px;
    .top-title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      i {
        outline: 0px;
        float: right;
      }
    }
    .top-content {
      span {
        color: rgba(0, 0, 0, 0.85);
        font-size: 30px;
        line-height: 38px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .top-chart {
        margin-top: 10px;
        height: 30px;
      }
    }
    .top-footer {
      margin-top: 10px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      padding-top: 14px;
      border-top: 1px solid #f0f0f0;
    }
  }
  .content-container {
    background-color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 20px;
    .content-chart {
      height: 450px;
      &.left {
        height: 504px;
        padding: 20px;
      }
    }
  }
  .logo-icon {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 5em !important;
    height: 5em !important;
    opacity: 0.2;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 40px;
    right: 80px;
    width: 200px;
    height: 50px;
    opacity: 0.3;

    span {
      font-size: 22px;
      user-select: none;
    }
  }
}
</style>
